<template>
    <a href="/add">添加</a>
    <h2>信息显示</h2>
    <a href="/">登录</a>
    房间状态
    <select v-model="query.zztt">
        <option value="0">请选择</option>
        <option value="1">空房</option>
        <option value="2">满房</option>
    </select>
    房态编号
    <input type="text" v-model="query.bbhh">
    <input type="button" value="查询" @click="querys">
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>房间状态</th>
                <th>房态编号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-for="a in data">
            <tr>
                <th>{{a.hid}}</th>
                <th>{{a.hname}}</th>
                <th>{{a.pwd}}</th>
                <th>{{a.zt==1?"空房":"满房"}}</th>
                <th>{{a.fTbh==1?"1":"2"}}</th>
                <th>
                    <input type="button" value="删除" @click="delee(a.hid)">
                </th>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(2)">
        <input type="button" v-for="s in fay.pagecount" :value="s" @click="fff(s)">
        <input type="button" value="下一页" @click="fan(3)">
        <input type="button" value="尾页" @click="fan(4)">
        页容量
        <select v-model="query.pagesize" @click="querys">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
            <option value="5">5条/页</option>
        </select>
        跳转
        <input type="text" v-model="query.pageindex">
        <input type="button" value="跳转" @click="shoow">

        共{{ fay.pagecount }}页，第{{ query.pageindex }}页，共{{ fay.count }}条，每页{{ query.pagesize }}条
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
onMounted(()=>{
    shoow()
})
//删除
const delee=(val:any)=>{
    if(confirm('确认删除吗'))
{
    axios.delete("https://localhost:7095/api/VS/Delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert('删除成功')
        shoow()
    }
    else
    {
        alert('删除失败')
        return
    }
    })
}
}


//查询
const query=ref({
    zztt:0,
    bbhh:0,
    pageindex:1,
    pagesize:2
})

const querys=()=>{
    query.value.pageindex=1;
    shoow()
}

//分页

const fff=(s:any)=>{
    query.value.pageindex=s;
    shoow()
}


const fan=(val:any)=>{
    if(val==1)
{
    query.value.pageindex=1;
    shoow()
}
if(val==2)
{
    if(query.value.pageindex>1)
{
    query.value.pageindex-=1;
    shoow()
}
}
if(val==3)
{
    if(query.value.pageindex<fay.value.pagecount)
{
    query.value.pageindex+=1;
    shoow()
}
}
if(val==4)
{
    query.value.pageindex=fay.value.pagecount;
    shoow()
}
}


const fay=ref({
    count:0,
    pagecount:0
})



const data=ref([{
    "hid": 0,
      "hname": "",
      "pwd": "",
      "zt": 0,
      "fTbh": 0,
      //"deleteID": false
}])

const shoow=()=>{
    axios.get("https://localhost:7095/api/VS/Show",{params:query.value}).then(res=>{
        data.value=res.data.list;
        fay.value.count=res.data.count;
        fay.value.pagecount=Math.ceil(fay.value.count/query.value.pagesize);
    })
}
</script>

<style scoped>

</style>